<template>
  <div>
    <Header title="电影详情"><i class="el-icon-arrow-left" @click="$global.back"></i></Header>
      <div class="detail_backgroud">
        <img :src="detail.img|setWH('128.180')" class="detail_banner">
        <div class="detail_info">
            <div style="min-width: 260px">
              <h1>{{detail.nm}}</h1>
              <h2>{{detail.enm}}</h2>
              <h3>{{detail.cat}}</h3>
              <h4>{{detail.src}}/{{detail.dur}}分钟</h4>
              <h4>{{detail.pubDesc}}</h4>
              <button  :class="Wchoose?'detail_button':'detail_button detail_button_focus'" @click="watch"><i class="el-icon-view"> 想看</i></button>
              <button :class="Fchoose?'detail_button':'detail_button detail_button_focus'" @click="fav"><i class="el-icon-star-off"> 收藏</i></button>
            </div>
            <div class="info_right">
              <p>想看数</p><h1 class="yspan">{{detail.wish}}</h1>
              <br>
              <p>{{ detail.scoreLabel}}</p><h1 v-if="detail.sc" class="yspan">&nbsp;{{detail.sc}}</h1>
            </div>
        </div>
      </div>
    <div class="content">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }"><span>首页</span></el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/movie'}"><span>电影资讯</span></el-breadcrumb-item>
        <el-breadcrumb-item><span>{{detail.nm}}</span></el-breadcrumb-item>
      </el-breadcrumb>
      <el-tabs v-model="activeName">
        <el-tab-pane label="介绍" name="first">
<introduce v-bind:detail="detail" :photos="photoList" @dochange="changeActive"></introduce>
        </el-tab-pane>
        <el-tab-pane label="预告片" name="second">
<movieplay :video="detail"></movieplay>
        </el-tab-pane>
        <el-tab-pane label="图集" name="third">
<photos v-bind:photos="photoList"></photos>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header";
import Introduce from "./detail/introduce";
import Photos from "./detail/photos";
import Movieplay from "./detail/movieplay";
import {mapState} from 'vuex'
export default {
  name: "detail",
  components: {Movieplay, Photos, Introduce, Header},
  data(){
    return{
      activeName: 'first',
    queryInfo:{movieid:this.$route.params.id,
      uid:window.localStorage.getItem('id'),
      type:1}
    }
  },
  computed:{...mapState({detail:state=>state.movie.detail,photoList:state=>state.movie.photoList,
      Wchoose:state=>state.movie.Wchoose,
    Fchoose:state=>state.movie.Fchoose})},
  beforeCreate() {
    this.$store.dispatch('movie/movDetail',this.$route.params.id)
    this.$store.dispatch('movie/movWatch',{movieid:this.$route.params.id,
      uid:window.localStorage.getItem('id'),
      type:1})
    this.$store.dispatch('movie/movFav',{movieid:this.$route.params.id,
      uid:window.localStorage.getItem('id'),
      type:2})
  },
  methods:{
    changeActive(data){
      this.activeName=data
    },
    watch(){
      this.$store.dispatch('movie/movAddWatch',{movieid:this.$route.params.id,
        uid:window.localStorage.getItem('id'),
        type:1})
    },
    fav(){
      this.$store.dispatch('movie/movAddFav',{movieid:this.$route.params.id,
        uid:window.localStorage.getItem('id'),
        type:2})
    }
  }
}
</script>

<style scoped>
/deep/ .el-tabs__item{
  font-size: 18px;
}
/deep/ .el-tabs{
margin-top: 10px;
}

</style>
